<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
    <title>SlickGrid example 6: AJAX Load</title>
    <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
    <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>
    <link rel="stylesheet" href="examples.css" type="text/css"/>
    <style>
        .slick-row {
            line-height:16px;
        }
        .loading-indicator {
            display: inline-block;
            padding: 12px;
            background: white;
            -opacity: 0.5;
            color: black;
            font-weight: bold;
            z-index: 9999;
            border: 1px solid red;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-box-shadow: 0 0 5px red;
            -webkit-box-shadow: 0px 0px 5px red;
            -text-shadow: 1px 1px 1px white;
        }
        .loading-indicator label {
            padding-left: 20px;
            background: url('../images/ajax-loader-small.gif') no-repeat center left;
        }
    </style>
</head>
<body>
<div style="width:700px;float:left;">
    <div class="grid-header" style="width:100%">
        <label>Octopart Catalog Search</label>
        <span style="float:right;display:inline-block;">
          Search:
          <input type="text" id="txtSearch" value="switch">
        </span>
    </div>
    <div id="myGrid" style="width:100%;height:600px;"></div>
    <div id="pager" style="width:100%;height:20px;"></div>
</div>
<div style="margin-left:750px;margin-top:40px;;">
    <h2>Demonstrates:</h2>
    <ul>
        <li>loading data through AJAX</li>
    </ul>

    <h2>WARNING:</h2>
    <ul>
        <li>API access through ThriftDB has some latency when paging through results. Be patient.
        </li>
    </ul>

    <h2>View Source:</h2>
    <ul>
        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example6-ajax-loading.html" target="_sourcewindow"> View the source for this example on Github</a></li>
    </ul>
</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.12.4.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
<script src="../lib/jquery.jsonp-2.4.min.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.remotemodel.js"></script>
<script src="../slick.grid.js"></script>

<script>
    var grid, s;
    var loader = new Slick.Data.RemoteModel();
    var mpnFormatter = function (row, cell, value, columnDef, dataContext) {
        s ="<a href='" + dataContext.octopart_url + "' target=_blank>" + dataContext.mpn + "</a>";
        return s;
    };
    var brandFormatter = function (row, cell, value, columnDef, dataContext) {
        return dataContext.brand.name;
    };
    var columns = [
        {id: "mpn", name: "MPN", field: "mpn", formatter: mpnFormatter, width: 100, sortable: true },
        {id: "brand", name: "Brand", field: "brand.name", formatter: brandFormatter, width: 100, sortable: true },
        {id: "short_description", name: "Description", field: "short_description", width: 520 },
    ];
    var options = {
        rowHeight: 21,
        editable: false,
        enableAddRow: false,
        enableCellNavigation: false
    };
    var loadingIndicator = null;
    $(function () {
        grid = new Slick.Grid("#myGrid", loader.data, columns, options);
        grid.onViewportChanged.subscribe(function (e, args) {
            var vp = grid.getViewport();
            loader.ensureData(vp.top, vp.bottom);
        });
        grid.onSort.subscribe(function (e, args) {
            loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
            var vp = grid.getViewport();
            loader.ensureData(vp.top, vp.bottom);
        });
        loader.onDataLoading.subscribe(function () {
            if (!loadingIndicator) {
                loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
                var $g = $("#myGrid");
                loadingIndicator
                        .css("position", "absolute")
                        .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
                        .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
            }
            loadingIndicator.show();
        });
        loader.onDataLoaded.subscribe(function (e, args) {
            for (var i = args.from; i <= args.to; i++) {
                grid.invalidateRow(i);
            }
            grid.updateRowCount();
            grid.render();
            loadingIndicator.fadeOut();
        });
        $("#txtSearch").keyup(function (e) {
            if (e.which == 13) {
                loader.setSearch($(this).val());
                var vp = grid.getViewport();
                loader.ensureData(vp.top, vp.bottom);
            }
        });
        loader.setSearch($("#txtSearch").val());
        loader.setSort("score", -1);
        grid.setSortColumn("score", false);
        // load the first page
        grid.onViewportChanged.notify();
    })
</script>
</body>
</html>